{extend name="extra@index/base" /}
{block name="title"}SpeedUp外卖{/block}

{block name="css"}

{/block}

{block name='page'}
<style>/**页面css写在这里*/
.card-header {
    background: #0099FF;
    color: white;
}

.icon-xitongfanhui:before {
    padding-right: 0.75rem;
}

.iconfont {
    font-size: 0.85rem;
}

.list-block .item-title.label {
    width: 30%;
}

.down-open {
    transform: rotate(180deg);
}

.icon-down {
    margin-right: 1.5rem;
}

.list-block .item-link .item-inner {
    background-image: none;
}

#advice li {
    padding-left: 2rem;
}

#advice .item-subtitle {
    color: #999;
}

#advice ul {
    background: #f5f5f5;
}

</style>
<!-- 页面开始 -->
<script src="/static/sui/js/sm-city-picker.js"></script>


{php}

$address=["Name"=>''];

$id=input('id');

$address=db('user_address')->where('id',$id)->find();
if($address){
$title="修改地址";

}else{
$title="添加新地址";
}

{/php}


<div id="vue">
    <div id="top">
        <div class="card-header">
            <span class="addaddress"><span class="iconfont icon-xitongfanhui"
                                           onclick="back()">{$title}</span></span>
            <span @click="saver">保存</span>
        </div>


        <div class="list-block">
            <ul>
                <li>
                    <div class="item-content">
                        <div class="item-media"></div>
                        <div class="item-inner">
                            <div class="item-title label">收货人</div>
                            <div class="item-input">
                                <input type="text" v-model="form.name">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media"></div>
                        <div class="item-inner">
                            <div class="item-title label">联系电话</div>
                            <div class="item-input">
                                <input type="text" v-model="form.phone">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content" id="city-picker">
                        <div class="item-media"></div>
                        <div class="item-inner">
                            <div class="item-title label" style="width: 99px">收货地址</div>
                            <div class="item-input">
                                <input type="text" id="address" v-model="form.city"/>
                            </div>
                        </div>
                        <span class="icon icon-down"></span>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media"></div>
                        <div class="item-inner">
                            <div class="item-title label">详细地址</div>
                            <div class="item-input">
                                <input type="text" id="deaddress" v-model="address">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>


        </div>
    </div>
    <div class="list-block media-list" id="advice">
        <ul class="content">
            <li v-for="a in advice" @click="setAddress(a.name,a.location)">
                <a href="#" class="item-link item-content">

                    <div class="item-inner">
                        <div class="item-title-row">
                            <div class="item-title">{{a.name}}</div>
                        </div>
                        <div class="item-subtitle">{{a.address}}</div>
                    </div>
                </a>
            </li>


        </ul>
    </div>
</div>


<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=671e6c5aa22e0b87471cb0487e39f36d"></script>

<script>
    var page = new Vue({
        el: '#vue',
        data: function () {
            return {
                form: {
                    name: "{$address.Name}",
                    phone: "{$address.Phone}",
                    city: '{$address.City}',
                    address: '{$address.Address}',
                    location: '{$address.Lon},{$address.Lat}',
                    id: '{$address.Id}'
                },
                advice: [],
                address: '{$address.Address}'
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                $("#advice ul").height($(window).height() - $("#top").height());
            })

        },
        methods: {
            amap: function (v) {
                $.get('http://restapi.amap.com/v3/assistant/inputtips?key=0545b97271c3aac138ddff6b25bf4a93', {
                    city: page.form.city,
                    keywords: v,
                    //type:'14|17|19',
                    children: 1,
                    citylimit: true
                }, function (ret) {
                    page.advice = ret.tips;
                })
            },
            saver: function () {
                if (!this.form.name) {
                    return $.alert("请输入姓名");
                }
                if (!this.form.phone) {
                    return $.alert("请输入联系电话");
                }
                if (!this.form.city) {
                    return $.alert("请选择城市");
                }

                if (!this.form.address) {
                    return $.alert("请选择一个离您最近的地点");
                }


                if (!this.form.location) {
                    return $.alert("请重新选择一个确切的地址");
                }

                $.showPreloader("保存中");
                $.post('/api/my/add_address', page.form, function (ret) {

                    $.toast(ret.msg)

                    if (ret.code > 0) {

                        back()

                    }
                    $.hidePreloader();
                })


            },
            setAddress: function (a, l) {
                page.form.address = page.address = a;

                page.form.location = l;
                setTimeout('page.advice=[]', 250)
            }

        },
        watch: {
            'address': function (v) {
                page.amap(v)
            }
        }
    })
    var data = null;
    $("#address").cityPicker({
        toolbarTemplate: '<header class="bar bar-nav">\
  <button class="button button-link pull-right close-picker" onclick="setaddress(data)">确定</button>\
  <h1 class="title">请选择地区</h1>\
  </header>',
        onClose: function () {
            $(".icon-down").removeClass('down-open');
            $("#city-picker").removeClass('close-picker');
        },
        onOpen: function (item) {
            data = item;
            $(".icon-down").addClass('down-open');
            setTimeout(function () {
                $("#city-picker").addClass('close-picker')
            }, 300);
        }
    });
    function setaddress(obj) {
        page.form.city = obj.value[0] + ' ' + obj.value[1] + ' ' + obj.value[2];
    }


    function back() {
        var from = '{:input("from")}';
        if (from) {
            $.router.load(from, true, 'left');
        } else {
            $.router.load('/my/index/address/', true, 'left');
        }
    }
</script>


<!-- 页面结束 -->
{/block}

{block name="base"}
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal theme-dark" id='panel-left'>
    <!-- 左边侧栏开始 -->

    <!-- 左边侧栏结束 -->
</div>
{/block}

{block name="js"}

{/block}